<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<title>File Manager System</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="<%=request.getContextPath()%>/css/bootstrap.min.css" rel="stylesheet">
</head>
<jsp:include page="/commons/header.jsp"></jsp:include>

<div class="panel panel-default">

	<div class="panel-body">
		<c:if test="${!empty dataList}">

			<table class="table table-bordered table-hover">
				<thead>
					<tr>
						<th>应用名称</th>
						<th>备注</th>
						<th>文件类型</th>
						<th style="text-align: center;">操作</th>
					</tr>
				</thead>
				<tbody>
				<c:forEach items="${dataList}" var="data">
					<tr>
						<td>${data.name}</td>
						<td>${data.description}</td>
						<td>
						<c:if test="${data.type==0}">XLS</c:if>
						<c:if test="${data.type==1}">图片</c:if>
						<c:if test="${data.type==2}">Excel</c:if>
						<c:if test="${data.type==3}">PDF</c:if>
						</td>
						<td style="text-align: center;" id="btn_opt">
							<button type="button" class="btn btn-default"
								aria-label="Left Align">
								<span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
							</button>
							
							<button  onclick="btn_view(${data.oid})"  type="button" class="btn btn-default"
								aria-label="Left Align" data-toggle="modal"  data-target="#myModal">
								<span class="glyphicon glyphicon-info-sign" aria-hidden="true" ></span>
							</button>
							
							<button  onclick="btn_del(${data.oid})" type="button" class="btn btn-default"
								aria-label="Left Align">
								<span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
							</button>
							
						</td>
					</tr>
				</c:forEach>
				</tbody>
			</table>
		</c:if>
	</div>

</div>



<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
   aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog" style="padding-top: 200px;">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" 
               data-dismiss="modal" aria-hidden="true">
                  &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">
            <%--  ${appInfo.name} --%>
            </h4>
         </div>
         <div class="modal-body" style="height:200px">
           <div class="form-group">
		    <label class="col-sm-2 control-label" style="line-height:15px;">名称：</label>
		      <p class="form-control-static" id="name"></p>
		    <label class="col-sm-2 control-label" style="line-height:15px;">时间：</label>
		      <p class="form-control-static" id="time"></p>
		    <label class="col-sm-2 control-label" style="line-height:15px;">描述：</label>
		      <p class="form-control-static" id="desc"></p>
		  </div>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-default" 
               data-dismiss="modal">关闭
          </button>

         </div>
      </div>
</div>
</div>


<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="<%=request.getContextPath()%>/js/bootstrap.min.js"></script>
<script type="text/javascript">
 function btn_view(oid){
	  $.ajax({
			type : "POST",
			url:"info?oid="+oid,
			success : function(data) {
				var dataInfo=JSON.parse(data);
				console.log(dataInfo);
				$(".modal-title").html(dataInfo.data.name);
				$("#name").html(dataInfo.data.name);
				$("#time").html(dataInfo.data.createTime);
				$("#desc").html(dataInfo.data.description);

			}
		});
  }
 
 function btn_del(oid){
	  $.ajax({
			type : "POST",
			url:"info?oid="+oid,
			success : function(data) {
				var dataInfo=JSON.parse(data);
				console.log(dataInfo);
				$(".modal-title").html(dataInfo.data.name);
				$("#name").html(dataInfo.data.name);
				$("#time").html(dataInfo.data.createTime);
				$("#desc").html(dataInfo.data.description);

			}
		});
 }
</script>
</html>
